<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 1000px;
        height: 100px;
        border: 1px solid red;
      }
      .outer:hover .inner {
        /* 设置动画停止播放 */
        animation-play-state: paused;
      }
      .inner {
        width: 100px;
        height: 100px;
        background-color: aqua;
        /* 动画名称 */
        animation-name: wangyoudong;
        /* 动画执行时长 */
        animation-duration: 3s;
        /* 运行动画前的延迟时间 */
        animation-delay: 2s;
        /* 设置动画分20步播放 */
        /* animation-timing-function: steps(20); */
        /* 设置动画播放3次 */
        /* animation-iteration-count: 3; */
        /* 设置动画无限播放 */
        /* animation-iteration-count: infinite; */
        /* 设置动画反方向播放(先执行to再执行from，或先执行100%然后依次执行到0%) */
        /* animation-direction: reverse; */
        /* 设置动画往反播放(先执行0%然后执至100%再从100%依次执行到0%),一般结合animaltion-ineration-count播放次数使用 */
        /* animation-direction: alternate; */
        /* 动画播放完毕后，动画元素存放到动画的最后一帧位置 */
        /* animation-fill-mode: forwards; */
        /* 动画播放完毕后，动画元素存放在动画的第一帧位置 */
        /* animation-fill-mode: backwards; */
      }
      /* 定义动画 (定义一组关键帧) */
      @keyframes wangyoudong {
        /* 第一帧 */
        0% {
        }
        30% {
          background-color: red;
        }
        60% {
          background-color: chartreuse;
        }
        /* 最后一帧 */
        100% {
          transform: translateX(900px) rotate3d(0, 0, 1, 365deg);
          background-color: orange;
          border-radius: 50%;
        }
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">turn</div>
    </div>
  </body>
</html>
